<template>
<!-- 歌曲专辑页面 -->
  <div class="album" 
    @click="$emit('update:showLyric',true)"
  >
      <div class="albumPicture" :class="{playing: playing}">
        <img src="../assets/images/ay0.png" class="needle" >
        <div class="albumbg" >
          <img :src="
              currentPlaySong.picUrl || currentPlaySong.al.picUrl | imageView(246)
            ">

        </div>
      </div>
  </div>
</template>

<script>
export default {
  props:["showLyric","currentPlaySong","playing"],
}
</script>

<style lang="less" scoped>


  .album{
    // background-color: pink;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    .albumPicture{
      text-align: center;
      width: 100%;
      height: 85vw;
      position: relative;
      // background-color: pink;
      .needle{
        position: absolute;
        height: 40%;
        // background-color: orange;
        margin-top: 2vh;
        z-index: 1;
        transform-origin: 22% 8%;
        // transform:  rotate(-35deg);
        transition: all 1s;
        transform: rotate(-30deg);

      }
      .albumbg{
        margin: 0 auto;
        width: 70%;
        height: calc(70vw - 14px);
        background: url("../assets/images/dta.png") rgba(255, 255, 255, 0.2) no-repeat center;
        background-size: 98%;
        border-radius: 50%;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translate(-50%, -100%);
        animation: rotate 5s linear infinite;
        animation-play-state: paused;
        img{
          text-align: center;
          vertical-align: middle;
          margin: auto;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 65%;
          border-radius: 50%;
        }

      }
    }
  }

@keyframes rotate{
  from{
    transform: translate(-50%, -100%) rotate(0deg);
  }
  to{
    transform: translate(-50%, -100%) rotate(360deg);
  }
}

.playing{
  .albumbg{
     animation-play-state: running !important;
  }
  .needle{
    transform: rotate(-7deg) !important;
  }
}
</style>